@use "../../assets/scss/mixins/size" as sz;

@mixin wh($width, $height) {
  @include sz.dimension($width, $height, "rem");
}
@mixin rect($width, $height, $color, $radius: unset) {
  @include wh($width, $height);
  background-color: $color;
  border-radius: $radius;
}
@mixin abs-tl($top, $left) {
  position: absolute;
  left: $left;
  top: $top;
}
@mixin abs-tr($top, $right) {
  position: absolute;
  right: $right;
  top: $top;
}

html {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}
body {
  min-height: 100vh;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: #382f45;
}

.container {
  margin: auto;
  @include wh(15, 17.5);
  .chain {
    position: absolute;
  }
  .link {
    position: absolute;
    @include rect(2, 3, #ff8e50, 1rem);
    background-image: linear-gradient(
      to bottom,
      #f8be5b 0%,
      #fef1c9 35%,
      #e69539 65%,
      #f7f2a0 100%
    );
    &:nth-child(2n + 1)::before {
      content: "";
      @include abs-tl(0.5rem, 0.5rem);
      @include rect(1, 2, #382f45, inherit);
    }
  }
  .links {
    &.left .link:nth-child(2n),
    &.right .link:nth-child(2n) {
      z-index: 1;
      @include rect(0.5, 2, #ff8e50, 1rem);
      background-image: linear-gradient(
        to right,
        #f8be5b 0%,
        #fef1c9 35%,
        #e69539 65%,
        #f7f2a0 100%
      );
    }
    &.left {
      .link {
        transform: rotate(-25deg);
        &:nth-child(1) {
          left: 0.25rem;
        }
        &:nth-child(2) {
          left: 1.6rem;
          top: 2rem;
        }
        &:nth-child(3) {
          left: 1.6rem;
          top: 3rem;
        }
        &:nth-child(4) {
          left: 2.9rem;
          top: 5rem;
        }
        &:nth-child(5) {
          top: 6.125rem;
          left: 2.9rem;
        }
        &:nth-child(6) {
          top: 8rem;
          left: 4.15rem;
        }
        &:nth-child(7) {
          top: 9.125rem;
          left: 4.2rem;
        }
        &:nth-child(8) {
          top: 11rem;
          left: 5.8rem;
          z-index: 0;
          transform: rotate(-40deg);
        }
      }
    }
    &.right {
      .link {
        transform: rotate(25deg);
        &:nth-child(1) {
          left: 12.75rem;
        }
        &:nth-child(2) {
          left: 12.7rem;
          top: 2rem;
        }
        &:nth-child(3) {
          left: 11.4rem;
          top: 3rem;
        }
        &:nth-child(4) {
          left: 11.4rem;
          top: 5rem;
        }
        &:nth-child(5) {
          left: 10rem;
          top: 6.125rem;
        }
        &:nth-child(6) {
          top: 8rem;
          left: 10.1rem;
        }
        &:nth-child(7) {
          top: 9.125rem;
          left: 8.7rem;
        }
        &:nth-child(8) {
          top: 11rem;
          left: 8.5rem;
          transform: rotate(40deg);
          z-index: 0;
        }
      }
    }
  }
  .chain.dollar {
    top: 11.5rem;
    left: 5.6rem;
    width: 3.43rem;
    height: 6rem;
    color: #ffef80;
    .fa {
      position: absolute;
      top: -0.95rem;
      font-size: 6rem;
      color: transparent;
      background: #ff8e50;
      background-image: linear-gradient(
        to right,
        #f8be5b 0%,
        #fef1c9 35%,
        #e69539 65%,
        #f7f2a0 100%
      );
      width: 100%;
      height: 100%;
      display: inline-block;
      background-clip: text;
    }
  }
}
